<template>
	<view>

		<view class="mode u-margin-top-20">
			<u-form :model="form" ref="uForm">
				<u-form-item :border-bottom="false" prop="sort" label="制作类型" label-width="200" @click="sortShow=true">
					<u-input v-model="form.sort" input-align="right" placeholder="请选择制作类型" type="select" disabled
						@click="sortShow=true" />
				</u-form-item>

				<u-form-item :border-bottom="false" prop="name" label="联系人" label-width="200">
					<u-input v-model="form.name" input-align="right" placeholder="请输入联系人" />
				</u-form-item>
				<u-form-item :border-bottom="false" prop="mobile" label="联系人号码" label-width="200">
					<u-input v-model="form.mobile" input-align="right" placeholder="请输入联系人号码" maxlength="11"
						type="Number" />
				</u-form-item>

				<u-form-item :border-bottom="false" label="上传图纸" label-width="200" label-position="top">
					<upload ref="videoUpload" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url"
						background="#818DFF" borderRadius="20" iconColor="#fff" width="160" height="160"></upload>
				</u-form-item>

				<u-form-item :border-bottom="false" prop="remark" label="需求备注" label-width="200" label-position="top">
					<u-input placeholder="请输入需求备注" type="textarea" v-model="form.remark"></u-input>
				</u-form-item>


				<view class="u-margin-bottom-40">
					<u-section title="订单金额" :right="false" :showLine="false">
						<view slot="right" style="color: #FA3534;font-weight: 36rpx;font-weight: bold;">
							￥{{menony}}
						</view>
					</u-section>
				</view>








			</u-form>

			<u-select v-model="sortShow" :list="sortList" value-name="id" label-name="classifyName" @confirm="confirm">
			</u-select>
			<u-button @click="submit" type="primary" :custom-style="{width:'500rpx'}" shape="circle">提交</u-button>
<u-toast ref="uToast" />


<u-top-tips ref="uTips"></u-top-tips>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import upload from "../../components/upload_img.vue";
	
	import payway from '@/common/wxpay.js';
	

	export default {

		components: {
			upload
		},

		data() {
			return {
				form: {
					remark: "",
					mobile: "",
					name: "",
					image_url: "",
					sort: ''
				},
				menony: "",
				sortList: [],
				sortShow: false,
				video_classify: {},
				rules: {
					sort: [{
						required: true,
						message: '请选择制作类型',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],

					name: [{
						required: true,
						message: '请输入联系人',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],

					remark: [{
						required: true,
						message: '请输入需求备注',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],




				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

			this.getClass()


			this.$u.api.Commission().then(res => {
				let menony = Number(res.buyVideoPrice).toFixed(2)
				this.menony = menony
			})


		},
		onShow() {

		},
		methods: {
			getClass() {
				this.$u.post('/index/videoClassify', {}).then(res => {
					this.sortList = res;
				}).catch(err => {})
			},

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.$refs.videoUpload.afterUploadImgList.length) {
							uni.$u.toast("请上传图纸")
							return
						}
						this.$u.post('/indent/makeVideo', {
							video_classify: this.video_classify.value,
							realname: this.form.name,
							mobile: this.form.mobile,
							remark: this.form.remark,
							image: this.$refs.videoUpload.afterUploadImgList.join(","),

						}).then(res => {
							
							var packages = res.package;
							var {
								noncestr,
								timestamp,
								signtype,
								paysign
							} = res;
							payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {			
							
								this.$refs.uTips.show({
											title: '请至【看视频】——【视频订单】查看视频制作情况哦~',
											type: 'success',
											duration: '2300'
								})
							
							}).catch(err => {
								uni.navigateBack({
							
								})
							})
							
						}).catch(err => {})


					} else {
						console.log('验证失败');
					}
				});
			},
			confirm(e) {
				this.form.sort = e[0].label;
				this.video_classify = e[0];
				console.log(e)
			}

		}
	}
</script>

<style>
	page {
		background: #818DFF;
		height: 100vh;
	}

	.u-form-item__message {
		text-align: right;
	}

	.sort {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border: 2rpx solid #333;
		box-sizing: border-box;
		border-radius: 50rpx;
		color: #333;
		text-align: center;
		display: table;
	}

	.change {
		border: 2rpx solid #818DFF;
		background: #818DFF;
		color: #FFFFFF;
	}
</style>
